<template>
  <div class="">
    <van-nav-bar @click-left="onClickLeft" left-arrow title="招聘发布设置" fixed></van-nav-bar>
    <main>

      <h3>招聘发布设置</h3>
      <van-cell-group>
        <van-cell title="是否推广" center>
          <template #default>
            <van-switch v-model="isSpread" size="20px" :active-value="2" :inactive-value="1" />
          </template>
        </van-cell>

        <van-cell title="选择区域" is-link :value="area" @click="areaShow = true" v-show="isSpread == 2" />
        <van-cell title="选择性别" is-link :value="sex" @click="sexShow = true" v-show="isSpread == 2" />

        <transition>
          <van-cell title="推广单价" center v-show="isSpread == 2">
            <template #default>
              <van-field v-model="spreadPrice" type="number" placeholder="请输入" input-align="right" />元
            </template>
          </van-cell>
        </transition>
        <transition>
          <van-cell title="推广次数" center v-show="isSpread == 2">
            <template #default>
              <van-field v-model="spreadNum" type="number" placeholder="请输入" input-align="right" />次
            </template>
          </van-cell>
        </transition>
        <transition>
          <van-cell title="是否全网付费推广" center v-show="isSpread == 2">
            <template #default>
              <van-switch v-model="totalSpread" :active-value="1" :inactive-value="0" size="20px" />
            </template>
          </van-cell>
        </transition>
        <transition>
          <van-cell title="商品单价" center v-show="pricing == 2">
            <template #default>
              <van-field v-model="shopPrice" type="number" placeholder="请输入" input-align="right" />元
            </template>
          </van-cell>
        </transition>
        <van-cell title="添加关注公众号" center>
          <template #default>
            <van-switch v-model="attention" size="20px" />
          </template>
        </van-cell>
      </van-cell-group>

    </main>
    <footer>
      <transition>
        <div class="price" v-show="isSpread == 2">
          本次推广需支付
          <p>
            ￥<span>{{ spreadTotalPrice }}</span>
          </p>
        </div>
      </transition>
      <transition>
        <div class="push" @click="clickPush">
          {{ isPower == 1 ? "确认" : "发布招聘" }}
        </div>
      </transition>
    </footer>
    <!-- 弹框 -->
    <van-dialog v-model="show" :show-confirm-button="false">
      <template #title>
        <van-icon name="cross" @click="show = false" />
      </template>
      <template #default>
        <div class="cont">
          <p v-if="isPay == 2">当前账号余额不足无法发布！</p>
          <!-- <p v-else-if="isPay == 1">您还未设置支付密码！</p> -->
          <p v-else-if="isPay == 3  && isPower == 1">当前未绑定公众号！</p>
          <p v-else-if="isPay == 3 && isPower !== 1">
            当前未绑定公众号！请联系管理员或关闭添加关注公众号选项！
          </p>
          <van-divider />
          <div class="foot" @click="go(2)" v-if="isPay == 2">去充值</div>
          <div class="foot" @click="go(1)" v-else-if="isPay == 1">去设置</div>
          <div class="foot" @click="go(3)" v-else-if="isPay == 3 && isPower==1">去绑定</div>
        </div>
      </template>
    </van-dialog>
    <!-- 弹出密码输入 -->
    <van-popup class="password" v-model="showPopup" position="bottom" :style="{ height: '60%', 'padding-top': '20px' }">
      <!-- 密码输入框 -->
      <!-- <van-password-input :value="pwd" info="密码为 6 位数字" :focused="showKeyboard" @focus="showKeyboard = true" /> -->
      <!-- 数字键盘 -->
      <!-- <van-number-keyboard v-model="pwd" :show="showKeyboard" @blur="showKeyboard = false" /> -->
    </van-popup>
    <!-- 性别弹出框 -->
    <van-action-sheet v-model="sexShow" :actions="sexArr" cancel-text="取消" close-on-click-action @select="select" @cancel="onCancel" />
    <!-- 区域弹出 -->
    <van-popup v-model="areaShow" position="bottom" :style="{ height: '60%' }">
      <van-area title="地址选择" :area-list="areaList" value="440300" :columns-num="2" @confirm="confirm" @cancel="onCancel" />
    </van-popup>

  </div>
</template>

<script>

import { areaList } from '@vant/area-data';
export default {

  name: "",
  data () {
    return {
      title: "",
      describes: "", //描述
      editor: "",
      editorContent: "", //文本内容
      imgUrl: "",
      fileList: [], // 展示上传图片
      show: false, //弹框
      showPopup: false, //密码弹出
      pwd: "", //密码
      showKeyboard: true,
      imgShow: false, //封面图片展示
      isSpread: 1, //是否推广
      spreadPrice: "", //单价
      spreadNum: "", //推广数
      attention: false, //是否关注公众号
      isPay: 1, //是去充值还是去支付
      sex: "请选择",
      sexShow: false, //性别弹出框
      sexArr: [{ name: '男' }, { name: '女' },],
      areaShow: false, //区域弹窗
      areaList: [],
      area: "请选择",
      pricing: 1, //是否定价
      shopPrice: "", //商品单价
      isPower: 1, //是否为超级管理员
      totalSpread: 0,//是否全网推广
      beforeBalance: 0, //原推广总价
      beforePrice: "", //原推广单价
      beforeNum: "", //原推广次数
    };
  },
  computed: {
    spreadTotalPrice () {
      return (this.spreadPrice * this.spreadNum).toFixed(2);
    },
  },
  // watch: {
  //   async pwd (pwd) {
  //     if (pwd.length === 6) {
  //       let obj = {
  //         balance: this.spreadTotalPrice - this.beforeBalance,
  //         accountId: this.$store.state.userInfo.account,
  //         id: this.$store.state.userInfo.id,
  //         pwd,
  //         type: 1,
  //       };
  //       let res = await this.$api.balancePay(obj);
  //       this.showPopup = false;

  //       this.pwd = "";
  //       //未设置支付密码
  //       if (res.code == 331) {
  //         this.show = true;
  //         this.isPay = 1;
  //         return;
  //       }
  //       //密码错误
  //       if (res.code == 333) {
  //         return this.$toast(res.msg);
  //       }
  //       // 余额不足
  //       if (res.code == 332) {
  //         this.show = true;
  //         this.isPay = 2;
  //         return;
  //       }
  //       if (res.code == 500) return this.$toast(res.msg);
  //       //有钱发请求
  //       this.addRecruit();
  //     } else if (pwd.length > 6) {
  //       this.pwd = "";
  //     }
  //   },
  // },
  //生命周期 - 创建完成（访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.isCustomer();
    this.$store.dispatch("updateUserInfo");
    document.querySelector("#app").style.backgroundColor = "#fff";
    this.areaList = areaList
    if (JSON.parse(sessionStorage.getItem("recruitmentInfo"))) {
      this.echoInfo();
    }
  },

  methods: {
    //判断是否有权限创建
    async isCustomer () {
      let userWxData = JSON.parse(sessionStorage.getItem("userWxData"));
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: userWxData.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
    },
    //选择性别
    select (e) {
      this.sex = e.name
      this.sexShow = false
    },
    //地址选择完成
    confirm (e) {
      this.area = e[1].name
      this.areaShow = false
    },
    //点击取消
    onCancel () {
      this.sexShow = false
      this.areaShow = false
    },
    //返回
    onClickLeft () {
      let {
        title,
        describes,
        editorContent: content,
        imgUrl: cover,
        isSpread,
        spreadPrice,
        spreadNum,
        attention,
        spreadTotalPrice,
        totalSpread,
        beforeBalance, // 原推广总价
        beforePrice, //原推广单价
        beforeNum, // 原推广次数
      } = this;
      let obj = {
        title, //标题
        describes, //描述
        content, //内容
        cover, //封面
        isSpread, //是否推广
        spreadPrice, //单价
        spreadNum, //次数
        spreadTotalPrice, //总价
        attention, //是否关注
        totalSpread,//是否全网推广
        beforeBalance, // 原推广总价
        beforePrice, //原推广单价
        beforeNum, // 原推广次数
      };
      sessionStorage.setItem("recruitmentInfo", JSON.stringify(obj));
      this.$router.back();
    },
    //发布招聘
    async clickPush () {
      let {
        title,
        describes: describes,
        editorContent: content,
        imgUrl: cover,
        isSpread,
        spreadPrice,
        spreadNum,
        attention,
        spreadTotalPrice,
        totalSpread,
        beforeBalance, // 原推广总价
        beforePrice, //原推广单价
        beforeNum, // 原推广次数
      } = this;
      if (title.trim() == "") return this.$toast("请输入招聘标题!");
      if (describes.trim() == "") return this.$toast("请输入招聘描述!");
      if (content.trim() == "") return this.$toast("请输入招聘内容!");
      if (cover.trim() == "") return this.$toast("请输入招聘封面!");
      // 选择了推广，进行验证
      if (isSpread == 2 && spreadTotalPrice != beforeBalance) {
        if (spreadPrice < beforePrice)
          return this.$toast("修改推广单价不能低于原推广单价!");
        if (spreadNum < beforeNum)
          return this.$toast("修改推广次数不能低于原推广次数!");
        if (spreadPrice.trim() == "") return this.$toast("推广单价不能为空!");
        if (Number(spreadPrice) < 0.01) {
          return this.$toast("推广单价不能少于0.01元!");
        }
        if (spreadNum.trim() == "") return this.$toast("推广次数不能为空!");
        var rep = /[\.]/;
        if (Number(spreadNum) == 0 || rep.test(Number(spreadNum))) {
          return this.$toast("推广次数不正确!");
        }
        // //判断是否有支付密码
        // if (this.isPower == 1 && this.$store.state.userInfo.paymentCode == "F") {
        //   this.show = true;
        //   this.isPay = 1;
        //   return;
        // }
        if (this.isPower !== 1) {
          this.addRecruit();
          return;
        }
        //判断是否有公众号
        if (attention && !this.$store.state.userInfo.officialChatImage) {
          this.show = true;
          this.isPay = 3;
          return;
        }
        //余额不足时
        if (
          this.$store.state.userInfo.agentBalance <
          spreadTotalPrice - this.beforeBalance
        ) {
          this.show = true;
          this.isPay = 2;
          return;
        }
        // this.showPopup = true;
        let obj = {
          balance: this.spreadTotalPrice - this.beforeBalance,
          accountId: this.$store.state.userInfo.account,
          id: this.$store.state.userInfo.id,
          type: 1,
          tableType:2
        };
        let res = await this.$api.balancePay(obj);
        if(res.code!==0) return;
        this.addRecruit();
      } else {
        this.addRecruit();
      }
    },
    //发请求
    async addRecruit () {
      let {
        title,
        describes,
        editorContent: content,
        imgUrl: cover,
        isSpread,
        spreadPrice,
        spreadNum,
        beforePrice,
        beforeNum,
        attention,
        spreadTotalPrice,
        totalSpread
      } = this;
      if (title.trim() == "") return this.$toast("请输入文章标题!");
      if (describes.trim() == "") return this.$toast("请输入文章描述!");
      if (content.trim() == "") return this.$toast("请输入文章内容!");
      if (cover.trim() == "") return this.$toast("请输入文章封面!");
      // 选择了推广，进行验证
      if (isSpread == 2) {
        if (spreadPrice.trim() == "") return this.$toast("推广单价不能为空!");
        if (Number(spreadPrice) < 0.01) {
          return this.$toast("推广单价不能少于0.01元!");
        }
        if (spreadNum.trim() == "") return this.$toast("推广次数不能为空!");
        var rep = /[\.]/;
        if (Number(spreadNum) == 0 || rep.test(Number(spreadNum))) {
          return this.$toast("推广次数不正确!");
        }
      } else {
        spreadPrice = 0;
        spreadNum = 0;
        spreadTotalPrice = 0;
      }

      //判断是否有公众号
      if (attention && !this.$store.state.userInfo.officialChatImage) {
        this.show = true;
        this.isPay = 3;
        return;
      }

      let obj = {
        title, //标题
        describes, //描述
        content, //内容
        cover, //封面
        isSpread, //是否推广
        spreadPrice, //单价
        spreadNum, //次数
        beforePrice,
        beforeNum,
        spreadTotalPrice, //总价
        attention, //是否关注
        totalSpread, //是否全网付费推广
        agentId: sessionStorage.getItem("agentId"), //公司id
        customerId: this.$store.state.userInfo.id,
        openId: this.$store.state.userInfo.openId,
      };
      if (this.$route.query.id && this.$route.query.title != "创建") {
        obj.id = this.$route.query.id;
      }
      if (this.isSpread == 2) {
        obj.type = 9;
        // 如果选择全网付费推广
        if (this.totalSpread == 1) {
          obj.type = 10;
        }
      } else if (this.isSpread == 1) {
        obj.type = 8;
      }

      if (this.isPower == 1 && this.isSpread == 2) {
        obj.audit = 2;
        obj.status = 2;
        obj.auditor = this.$store.state.userInfo.id;
      }
      let res = await this.$api.addRecruit(obj);
      if (res.code !== 0) return this.$toast(res.msg);
      if (this.$route.query.id && this.$route.query.title != "创建") {
        //如果是管理员
        if (this.isPower == 1 && isSpread == 2) {
          let obj = {
            tableType: 15,
            id: this.$route.query.id,
            type: 1, //上下架 1审核2上下架
            auditor: this.$store.state.userInfo.id,
            status: 2,
            audit: 2,
          };
          // 如果选择全网付费推广
          if (this.totalSpread == 1) {
            obj.classify = 10;
          } else {
            obj.classify = 9;
          }
          let result = await this.$api.updateStatus(obj);

          if (result.code != 0) return this.$toast(result.msg);

          //修改推广
          let objs = {
            tableId: this.$route.query.id, //资源id
            tableType: 1, //资源类型
            spreadPrice: spreadPrice - beforePrice, //推广单价
            spreadNum: spreadNum - beforeNum, //推广数
          };
          let reses = await this.$api.timedTask(objs);
          if (reses.code != 0) return this.$toast(reses.msg);
        }

        this.$toast(this.$route.query.title + "成功！");
      } else {
        this.$toast("创建成功！");
      }

      setTimeout((_) => {
        if (JSON.parse(sessionStorage.getItem("recruitmentInfo"))) {
          sessionStorage.removeItem("recruitmentInfo");
        }
        this.$router.go(-3);
      }, 800);
    },
    //去充值 去设置支付密码
    go (n) {
      let {
        title,
        describes: describes,
        editorContent: content,
        imgUrl: cover,
        isSpread,
        spreadPrice,
        spreadNum,
        attention,
        spreadTotalPrice,
        totalSpread, //是否全网付费推广
        beforeBalance, // 原推广总价
        beforePrice, //原推广单价
        beforeNum, // 原推广次数
      } = this;
      let obj = {
        title, //标题
        describes, //描述
        content, //内容
        cover, //封面
        isSpread, //是否推广
        spreadPrice, //单价
        spreadNum, //次数
        spreadTotalPrice, //总价
        attention, //是否关注
        totalSpread, //是否全网付费推广
        beforeBalance, // 原推广总价
        beforePrice, //原推广单价
        beforeNum, // 原推广次数
      };
      sessionStorage.setItem("recruitmentInfo", JSON.stringify(obj));
      //去设置支付密码
      // this.show = false;
      // if (n == 1) {
      //   this.$router.push("/settingpayPassword?from=addRecruitment");
      // } else 
      if (n == 2) {
        // 去充值
        this.$router.push("/topup?from=addRecruitment");
      } else {
        //去绑定公众号
        this.$router.push("/personal?from=addRecruitment");
      }
    },
    // 回显数据
    echoInfo () {
      let info = JSON.parse(sessionStorage.getItem("recruitmentInfo"));
      this.editorContent = info.content; //内容
      this.title = info.title; //标题
      this.describes = info.describes; //描述
      this.imgUrl = info.cover; //封面图
      this.fileList = [{ url: info.cover }]; //封面图
      this.isSpread = info.isSpread; //是否推广
      this.spreadPrice = info.spreadPrice; //单价
      this.spreadNum = info.spreadNum; //推广数
      this.attention = info.attention; //是否关注公众号
      this.totalSpread = info.totalSpread || 0; //是否全网付费推广
      this.beforeBalance = info.beforeBalance; //原推广总价
      this.beforePrice = info.spreadPrice; //原推广单价
      this.beforeNum = info.spreadNum; //原推广次数
    },
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .van-field {
    width: 80px;
    margin-right: 5px;
  }
}
// 进入前和结束后的状态
.v-enter,
.v-leave-to {
  opacity: 0;
}
// 进入和离开的动画时间段
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
.textarea {
  margin-top: 10px;
  background-color: #f3f5f7;
  padding: 12px !important;
  border-radius: 5px;
}
main {
  height: calc(100vh - 101px);
  padding: 46px 15px 0;
  overflow-y: scroll;
  input {
    margin-top: 7px;
    height: 40px;
    width: 100%;
    opacity: 1;
    background: #f3f5f7;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    padding-left: 12px;
    box-sizing: border-box;
    &::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #bebebe;
    }
  }
  #editors {
    margin-top: 18px;
  }
  .up {
    margin-top: 10px;
    .uploading {
      width: 80px;
      height: 80px;
      position: relative;
      background-color: #fff;
    }
    //封面
    .u_img {
      width: 80px;
      height: 80px;
      box-sizing: border-box;
      margin-top: 4.000008px;
      box-shadow: 3.5px dashed rgba(153, 153, 153);
      .van_img {
        width: 80px;
        height: 80px;
        border: 0;
      }
      .poster_tips {
        width: 80px;
        height: 80px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .van-uploader {
        .van-uploader__preview-delete {
          width: 11.71875px;
          height: 11.71875px;
          i {
            font-size: 11.71875px;
            top: -0.585938px;
            left: -0.585938px;
          }
        }
      }
    }

    .img_Show {
      position: relative;

      .close {
        position: absolute;
        width: 12px;
        height: 12px;
        left: 68px;
        color: #fff;
        background-color: #000;
        border-bottom-left-radius: 10px;
        font-size: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .imgShow {
        display: flex;
        align-items: center;
        width: 80px;
        height: 80px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  p {
    margin: 5px;
    font-size: 10px;
    text-align: left;
    color: #999999;
    letter-spacing: 1px;
  }
  h3 {
    margin: 25px 0;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
  }
  .van-cell {
    padding: 10px 0;
  }
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f9fafb;
  .price {
    height: 100%;
    flex: 3;
    font-size: 11px;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      font-size: 12px;
      color: #f9572c;
      span {
        font-size: 16px;
      }
    }
  }
  .push {
    height: 100%;
    flex: 2;
    background-color: #477fe6;
    font-size: 17px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/deep/ .van-dialog__header {
  text-align: right;
  padding: 15px 15px 0 0;
}
.van-dialog {
  width: 272px;
  .cont {
    font-size: 14px;
    font-weight: 700;
    color: #353535;
    text-align: center;
    p {
      padding: 20px 0;
    }
    .van-divider {
      margin: 0;
    }
    .foot {
      width: 100%;
      height: 43px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #009dff;
    }
  }
}
.van-action-sheet__cancel,
.van-action-sheet__item {
  padding: 14px 0;
}
</style>